CSS-এর বক্স মডেল (Box Model) হলো একটি গুরুত্বপূর্ণ ধারণা, যা HTML এলিমেন্টের চারপাশের স্পেস এবং এলিমেন্টের আকার নিয়ন্ত্রণ করতে সাহায্য করে। বক্স মডেল মূলত একটি এলিমেন্টকে একটি বক্স হিসেবে বিবেচনা করে এবং এই বক্সের বিভিন্ন অংশ নিয়ন্ত্রণ করে: Content, Padding, Border, এবং Margin।
বক্স মডেল (Box Model)
CSS বক্স মডেল একটি এলিমেন্টের গঠনকে নিচের চারটি স্তরে বিভক্ত করে:
- Content: এলিমেন্টের মূল কন্টেন্ট যেখানে টেক্সট, ইমেজ বা অন্য মিডিয়া থাকে।
- Padding: কন্টেন্ট এবং বর্ডারের মধ্যে স্পেস।
- Border: এলিমেন্টের চারপাশের বর্ডার বা প্রান্ত।
- Margin: এলিমেন্টের বাইরে স্পেস, যা এলিমেন্টকে অন্য এলিমেন্ট থেকে দূরে সরিয়ে রাখে।
মার্জিন (Margin)
মার্জিন হলো একটি এলিমেন্টের বাইরে স্পেস, যা এলিমেন্ট এবং এর আশেপাশের অন্যান্য এলিমেন্টের মধ্যে দূরত্ব তৈরি করে।
মার্জিনের বৈশিষ্ট্য:
- মার্জিনের জন্য
marginপ্রপার্টি ব্যবহার করা হয়। - একসঙ্গে চারদিকে (Top, Right, Bottom, Left) স্পেস নির্ধারণ করা যায়।
উদাহরণ:
div {
margin: 20px; /* চারপাশে 20px স্পেস */
}
পৃথকভাবে মার্জিন সেট করা:
div {
margin-top: 10px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 25px;
}
প্যাডিং (Padding)
প্যাডিং হলো এলিমেন্টের কন্টেন্ট এবং বর্ডারের মধ্যে স্পেস। এটি কন্টেন্টের ভেতরের অংশকে স্পেস দেয়।
প্যাডিংয়ের বৈশিষ্ট্য:
- প্যাডিং
paddingপ্রপার্টি দিয়ে নিয়ন্ত্রণ করা হয়। - এটি এলিমেন্টের ভেতরের স্পেস বাড়ায়, কিন্তু এলিমেন্টের ব্যাকগ্রাউন্ড রঙ প্যাডিং এলাকাতেও প্রভাবিত হয়।
উদাহরণ:
div {
padding: 20px; /* চারদিকে 20px প্যাডিং */
}
পৃথকভাবে প্যাডিং সেট করা:
div {
padding-top: 10px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 25px;
}
বর্ডার (Border)
বর্ডার হলো একটি এলিমেন্টের চারপাশের প্রান্ত বা সীমারেখা। বর্ডারকে স্টাইল, রঙ এবং পুরুত্বসহ সেট করা যায়।
বর্ডারের বৈশিষ্ট্য:
- বর্ডার
borderপ্রপার্টি দিয়ে সেট করা হয়। - এটি
border-width,border-style, এবংborder-colorএর সমন্বয়ে তৈরি হয়।
উদাহরণ:
div {
border: 2px solid red; /* বর্ডার পুরুত্ব, স্টাইল এবং রঙ */
}
পৃথকভাবে বর্ডার সেট করা:
div {
border-top: 2px dashed blue;
border-right: 3px solid green;
border-bottom: 2px dotted black;
border-left: 4px solid orange;
}
বক্স মডেলের উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<title>Box Model Example</title>
<style>
.box {
width: 200px;
height: 100px;
padding: 20px;
margin: 30px;
border: 5px solid #333;
background-color: lightgray;
}
</style>
</head>
<body>
<div class="box">This is a box.</div>
</body>
</html>
ব্যাখ্যা:
- width এবং height: এলিমেন্টের মূল কন্টেন্ট এরিয়া।
- padding: 20px: কন্টেন্টের চারপাশে 20px স্পেস।
- border: 5px solid: 5px পুরু বর্ডার।
- margin: 30px: এলিমেন্টের চারপাশে 30px স্পেস।
বক্স মডেলের ভূমিকা
- স্পেসিং কন্ট্রোল: এলিমেন্টের ভেতর এবং বাইরে সঠিক স্পেসিং তৈরি করা।
- ডিজাইন স্ট্রাকচার: বক্স মডেল ওয়েব পেজের সঠিক লেআউট ও অ্যালাইনমেন্ট নিশ্চিত করে।
- ব্যবহারকারীর অভিজ্ঞতা: এলিমেন্টের স্পেস এবং স্টাইল প্রপারলি ম্যানেজ করলে ওয়েবসাইট দেখতে সুন্দর এবং পড়তে সহজ হয়।
সারসংক্ষেপ
- মার্জিন: এলিমেন্টের বাইরের স্পেস।
- প্যাডিং: কন্টেন্টের ভেতরের স্পেস।
- বর্ডার: এলিমেন্টের প্রান্ত বা সীমানা।
- বক্স মডেল: HTML এলিমেন্টের কন্টেন্ট, প্যাডিং, বর্ডার, এবং মার্জিনের সমন্বয়ে তৈরি একটি কাঠামো।
CSS বক্স মডেল ব্যবহার করে এলিমেন্টগুলোর সঠিক আকার এবং অবস্থান নির্ধারণ করা সম্ভব হয়, যা ওয়েব পেজের লেআউট ডিজাইনে অত্যন্ত গুরুত্বপূর্ণ।
Read more
